| |
|
|
| |
Arrays
An array is a group. An array is also an object and as an object, it has properties. There are built in arrays, such as all the images on a page. Have a look at this...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="Javascript"><!--
function ShowSource(position)
{
window.document.form01.input01.value = window.document.images[position].src;
}
function NumberofImages()
{
alert(window.document.images.length);
}
//--></SCRIPT>
</HEAD>
<BODY>
<CENTER>
<A HREF="" onMouseOver="ShowSource(0) "><IMG SRC="food_icons/beer.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(1) "><IMG SRC="food_icons/burger.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(2) "><IMG SRC="food_icons/butter.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(3) "><IMG SRC="food_icons/carrot.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(4) "><IMG SRC="food_icons/cheese.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(5) "><IMG SRC="food_icons/cherries.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<BR>
<A HREF="" onMouseOver="ShowSource(6) "><IMG SRC="food_icons/hotdog.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(7) "><IMG SRC="food_icons/icecream.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(8) "><IMG SRC="food_icons/lemon.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(9) "><IMG SRC="food_icons/pizza.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(10)"><IMG SRC="food_icons/salad.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(11)"><IMG SRC="food_icons/sammawich.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<FORM NAME="form01">
<INPUT TYPE="text" NAME="input01" VALUE="" SIZE=70>
</FORM>
<A HREF="javascript:NumberofImages()">Click here</A> for number of images on this page.
</CENTER>
</BODY>
</HTML>
|
This demonstrates (more or less) the image array. The image array is an array of all the images on a page: images[]. The browser isn't necessarily interested in what the pictures are so it numbers them, starting with 0. The first image is images[0], the second is images[1], the third is images[2], etc. The array as a whole has properties, one of which is length. This is demonstrated in the text link that throws up the number of images on the page. Each individual image also has properties of its own, such as src (source). This is demonstrated by the function ShowSource(). We pass the index number to the function and it displays that image's source in the text box.
Understand that arrays can be a little confusing, so if it seems a little foggy, that's normal. It will sink in soon.
Exercise: Alter the previous example so that there is just the images on the page. When the user clicks on an image, an alert box pops up with something like this...
You picked image indexed 3 out of 12 total images. It's source is C:\path\path\burger.gif
Even though you know there are 12 total images on the page, I don't want you to hard code "12" into the function. I want you to get that number from the length property of the image array object.
Another property of individual images is the name property. In an image tag, we can give an image a name like so...
<IMG SRC="mypic.gif" HEIGHT=32 WIDTH=32 NAME="img01">
We can then use it in a script (for example, to get that image's source)...
window.document.images['img01'].src
Notice that now we have two ways to specify a particular image in the image array... by number, or by name. Study that idea until you understand it.
Exercise: Make a new web page using the 12 food icons. Give each image a name. Make it so that when the user clicks on an image, an alert box pops up with that image's source. Get the source by referencing the image by name, not by index number.
We passed the image name to the function. The function then used it to determine the source of that image. Keep studying the example until it's clear.
| << BACK NEXT >> |
|
|
Javascript Reference irt.org/Javascript FAQ Deja Power Search  Joke Break |
|
| Print version available - Get the PageTutor book & CD |
|
 |
|
|
Lifetime Web Hosting